<template>
	<view class="content  ">
		<view class="header-report flex-align-center">
			<view class="select-date-box">
				<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
			</view>
			<view class="title flex-center">近10周学习数据对比</view>
		</view>
		<view class="content-report">
			<view class="content-report-header flex-align-center">
				<view class="content-report-header-item flex-align-center" style="padding-left: 70rpx; ">
					<view class="line-box-collect">
						<qiun-data-charts type="arcbar" :opts="opts" :chartData="Arcbar1" />
					</view>
					<view class="rate-desc">
						<view class="">
							学习天数：<span>65</span>
						</view>
						<view class="" style="margin-top: 44rpx;">
							报名天数：<span>65</span>
						</view>
					</view>
				</view>
				<view class="content-report-header-item flex-align-center" style="padding-left: 70rpx; ">
					<view class="line-box-collect">
						<qiun-data-charts type="arcbar" :opts="opts" :chartData="Arcbar1" />
					</view>
					<view class="rate-desc">
						<view class="">
							有效时长：<span>11.5小时</span>
						</view>
						<view class="" style="margin-top: 44rpx;">
							在线时长：<span>65小时</span>
						</view>
					</view>
				</view>
				<view class="content-report-header-item flex-align-center" style="padding-left: 0rpx;margin-right:0 ">
					<view class="rate-desc" style="margin-left: 26rpx;">
						<view class="">
							累计打卡天数：<span>11</span>
						</view>
						<view class="" style="margin-top: 44rpx;">
							最大连续打卡天数：<span>65</span>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-align-center" style="margin-top: 51rpx;margin-right:0">
				<view class="content-report-header-item total-num-box flex-center"
					style="margin-right: 0;padding: 51rpx 0rpx 62rpx 0rpx;">
					<view class="flex-align-center item-num">
						<image class="img-box" src="../../../../static/images/common/jinbi-huang.png"></image>
						<span class="num-orange">269</span>
					</view>
					<view class="flex-align-center item-num">
						<image class="img-box" src="../../../../static/images/common/jinbi-cheng.png"></image>
						<span class="num-orange">0</span>
					</view>
					<view class="flex-align-center item-num">
						<view class="img-box flex-center">
							<image src="../../../../static/images/common/zhuanshi-zi.png"
								style="width: 36rpx;height: 30rpx;"></image>
						</view>
						<span class="num-people">25</span>
					</view>
				</view>
				<view class="mine-medal flex-align-center">
					<view class="title flex-center">
						我的勋章
					</view>
					<view class="mine-medal-list flex-align-center">
						<view class="mine-medal-list-item flex-center">
							<image src="../../../../static/images/common/xueba.png"></image>
							<span>学霸体质</span>
						</view>
						<view class="mine-medal-list-item flex-center">
							<image src="../../../../static/images/common/qinxue.png"></image>
							<span>勤学标兵</span>
						</view>
						<view class="mine-medal-list-item flex-center">
							<image src="../../../../static/images/common/jiyi.png"></image>
							<span>记忆狂人</span>
						</view>
					</view>

				</view>
			</view>
			<view class="content-report-content">

				<view class="" style="position: relative;">
					<image src="../../../../static/images/common/tixingbiankuang.png" class="border-corp"></image>
					<view class="corp-title flex-center">词汇智能统计</view>
				</view>
				<view class="content-report-list flex-align-center">
					<view class="columnar-item">
						<qiun-data-charts type="column" :opts="optsColumnar" :chartData="chartDataColumnar" />
					</view>
					<view class="columnar-item">
						<qiun-data-charts type="column" :opts="optsColumnar2" :chartData="chartDataColumnar2" />
					</view>
					<view class="content-report-list-item flex-center" style="padding: 20rpx 0rpx 28rpx 0rpx;">
						<view class="line-box-collect">
							<qiun-data-charts type="arcbar" :opts="focusOpts" :chartData="Arcbar1" />
						</view>
						<view class="flex-center label-desc">
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									有效
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									在线
								</view>
							</view>
						</view>
					</view>
					<view class="content-report-list-item flex-align-center" style="padding: 30rpx 19rpx 28rpx 19rpx;">
						<view class="circle-bj flex-center">
							84
						</view>
						<span>学习能力</span>
					</view>
					<view class="content-report-list-item flex-align-center" style="margin-right:0">
						<view class="study-speed">
							<qiun-data-charts type="gauge" :opts="studyOpts" :chartData="studyChartData" />
						</view>
						<view class="flex-align-center speed-desc" style="flex-direction: column;">
							<span class="speed-desc-num">244个/小时</span>
							<span>学习速度</span>
						</view>
					</view>

				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {


		},
		data() {
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				optsColumnar: {
					color: ["#009DDF", "#010EAD", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [20, 0, 0, 0],
					enableScroll: false,
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true,
						fontSize: 10,
					},
					yAxis: {
						data: [{
							min: 0,
							fontSize: 10,
						}]
					},
					extra: {
						column: {
							type: "stack",
							width: 10,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							labelPosition: "center"
						}
					}
				},
				optsColumnar2: {
					color: ["#009DDF", "#010EAD", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [20, 0, 0, 0],
					enableScroll: false,
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true,
						fontSize: 10,
					},
					yAxis: {
						data: [{
							min: 0,
							fontSize: 10,
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 5,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							labelPosition: "center"
						}
					}
				},
				chartDataColumnar2: {
					categories: ["跟读", "抄写", "认词", "听词", "读词", "说词", "听写"],
					series: [{
							name: "目标值",
							textColor: "#FFFFFF",
							data: [35, 36, 31, 33, 13, 34, 13, ]
						},
						{
							name: "完成量",
							textColor: "#FFFFFF",
							data: [18, 27, 21, 24, 6, 28, 13, ]
						}
					]
				},
				chartDataColumnar: {
					categories: ["跟读", "抄写", "认词", "听词", "读词", "说词", "听写", "默写", "用词"],
					series: [{
							name: "目标值",
							textColor: "#FFFFFF",
							data: [35, 36, 31, 33, 13, 34, 34, 34, 34, 34, 34]
						},
						{
							name: "完成量",
							textColor: "#FFFFFF",
							data: [18, 27, 21, 24, 6, 28, 34, 34, 34, 34, 34, 34]
						}
					]
				},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['gauge'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				ybOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "66Km/H",
						fontSize: 25,
						color: "#2fc25b",
						offsetY: 0
					},
					subtitle: {
						name: "实时速度",
						fontSize: 15,
						color: "#1890ff",
						offsetY: 0
					},
					extra: {
						gauge: {
							type: "progress",
							width: 20,
							labelColor: "#666666",
							startAngle: 0.75,
							endAngle: 0.25,
							startNumber: 0,
							endNumber: 100,
							labelFormat: "",
							splitLine: {
								fixRadius: -10,
								splitNumber: 10,
								width: 15,
								color: "#FFFFFF",
								childNumber: 5,
								childWidth: 12
							},
							pointer: {
								width: 24,
								color: "auto"
							}
						}
					},
				},


				value: "",
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				"Arcbar1": {
					"series": [{
						"name": "正确率",
						"data": 0.8,
						"color": "#ff4618"
					}]
				},
				opts: {
					color: ["#1890FF", "#23a0c2", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [0, 0, 0, 0],
					title: {
						name: "80%",
						fontSize: 25,
						color: "#ff4618"
					},
					subtitle: {
						name: "出勤率",
						fontSize: 12,
						color: "#000"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 8,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				focusOpts: {
					color: ["#1890FF", "#23a0c2", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [0, 0, 0, 0],
					title: {
						name: "18%",
						fontSize: 25,
						color: "#ff4618"
					},
					subtitle: {
						name: "专注度",
						fontSize: 12,
						color: "#000"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 8,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				chartData: {
					series: [{
						data: [{
							"name": "词汇",
							"value": 50,
							"labelShow": false
						}, {
							"name": "例句",
							"value": 30,
							"labelShow": false
						}, {
							"name": "句子",
							"value": 20,
							"labelShow": false
						}, {
							"name": "语法",
							"value": 18,
							"labelShow": false
						}, {
							"name": "课文",
							"value": 8,
							"labelShow": false
						}, {
							"name": "习题",
							"value": 8,
							"labelShow": false
						}, {
							"name": "其他",
							"value": 8,
							"labelShow": false
						}]
					}]
				},

				durationOpts: {
					rotate: false,
					rotateLock: false,
					color: ["#0514FA", "#007F06", "#FF9C00", "#FC5F00", "#FF0000", "#F000FF", "#9398D8"],
					padding: [0, 0, 0, 0],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: false,
						position: "right",
						lineHeight: 25,
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 30,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "transparent"
						}
					}
				},
				studyOpts: {
					color: ["#1890FF", "#91CB74"],
					padding: [5, 0, 0, 0],
					legend: {
						show: false
					},
					title: {
						name: "",
						fontSize: 12,
						color: "#000",
						offsetY: 0,
						show: false
					},
					subtitle: {
						name: "",
						fontSize: 12,
						color: "#1890ff",
						offsetY: 0,
						show: false
					},
					extra: {
						gauge: {
							type: "progress",
							width: 16,
							labelColor: "#666666",
							startAngle: 0.75,
							endAngle: 0.25,
							startNumber: 0,
							endNumber: 100,
							labelFormat: "",
							splitLine: {
								fixRadius: -10,
								splitNumber: 10,
								width: 15,
								color: "#FFFFFF",
								childNumber: 5,
								childWidth: 8
							},
							pointer: {
								width: 10,
								color: "auto"
							}
						}
					}
				},
				studyChartData: {
					categories: [{
						"value": 0.2,
						"color": "#1890ff"
					}, {
						"value": 0.8,
						"color": "#2fc25b"
					}, {
						"value": 1,
						"color": "#f04864"
					}],
					series: [{
						name: "完成率",
						data: 0.66
					}]
				}
			}
		},
		methods: {
			change(e) {
				console.log("e:", e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.color-716E6E {
		color: #716E6E;

	}

	.color-50A056 {
		color: #50A056;
	}

	.line {
		width: 1rpx;
		height: px_2_vw(29);
		border-left: 1rpx solid #000;
		margin: 0 19rpx;
	}

	.content {
		width: 100%;
		height: 100%;
		background: #fff;
		border-radius: 65rpx;



		// padding: 57rpx 50rpx;
		.header-report {
			width: 100%;
			height: px_2_vw(127);
			background: #C0C3F5;
			border-radius: 65rpx 65rpx 0px 0px;
			padding: 33rpx 44rpx;

			.select-date-box {
				width: px_2_vw(583);
				height: px_2_vw(70);
			}

			.title {
				width: px_2_vw(351);
				height: px_2_vw(70);
				background: #F5F5F6;
				border-radius: 10rpx;
				margin-left: 30rpx;
				color: #0514FA;
				font-weight: 600;
			}
		}

		.content-report {
			padding: 49rpx 50rpx;
			overflow-y: auto;
			height: calc(100vh - 300rpx);

			.content-report-header-item {
				width: px_2_vw(657);
				height: px_2_vw(243);
				margin-right: 26rpx;
				background: #C0C3F5;
				border-radius: 14rpx;
				// flex-direction: column;
				// justify-content: space-between;
				font-size: px_2_vw(22);
				font-weight: 600;

				.rate-desc {
					font-size: px_2_vw(24);
					margin-left: 60rpx;
				}


				.item-num {
					width: px_2_vw(150);
					// border: 1rpx solid #000;
				}

				.img-box {
					width: px_2_vw(48);
					height: px_2_vw(48);
					margin-right: 11rpx;
				}

				.num-orange {
					color: #F5680B;
					font-size: px_2_vw(28);
				}

				.num-people {
					color: #DD0654;
					font-size: px_2_vw(28);
				}

			}

			.circle-bj {
				width: px_2_vw(176);
				height: px_2_vw(171);
				border-radius: 50%;
				background: rgba(107, 186, 144, 0.5);
				margin-bottom: 22rpx;
				color: #199E5E;
				font-size: px_2_vw(56);
			}

			.line-box-collect {
				width: px_2_vw(188);
				height: px_2_vw(188);
			}

			.line-box2 {
				width: px_2_vw(220) !important;
				height: px_2_vw(220) !important;
			}

			.total-num-box {
				width: px_2_vw(215);
				height: px_2_vw(220);
				flex-direction: column;
				justify-content: space-between;
				padding: 20rpx 0 !important;

			}

			.mine-medal {
				margin-left: 33rpx;
				width: px_2_vw(1482);
				height: px_2_vw(220);
				background-color: #C0C3F5;
				border-radius: 14rpx;
				padding: 28rpx 0;

				.title {
					width: px_2_vw(80);
					height: px_2_vw(162);
					border-radius: 0 30rpx 30rpx 0;
					background-color: #9CA1EF;
					font-weight: 600;
					writing-mode: vertical-rl;
					letter-spacing: 4rpx;
				}

				.mine-medal-list {
					margin-left: 32rpx;
					font-size: px_2_vw(24);

					.mine-medal-list-item {
						height: 100%;
						width: px_2_vw(119);
						flex-direction: column;
						margin-right: 18rpx;


						image {
							width: px_2_vw(119);
							height: px_2_vw(123);
							margin-bottom: 0;
						}
					}
				}
			}

			.label-desc {
				font-size: px_2_vw(18);
			}
		}

		.content-report-content {
			.border-corp {
				width: 100%;
				height: px_2_vw(63);
				margin: 22rpx auto;
			}

			.corp-title {
				width: px_2_vw(284);
				height: px_2_vw(57);
				background-image: url('@/static/images/common/duobianxing.png');
				background-size: 100% 100%;
				margin: 0rpx auto;
				font-weight: 600;
				color: #fff;
				position: absolute;
				top: 60rpx;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.content-report-list {
				.content-report-list-item {
					width: px_2_vw(250);
					height: px_2_vw(297);
					margin-right: 26rpx;
					background: #C0C3F5;
					border-radius: 14rpx;
					flex-direction: column;
					justify-content: space-between;
					font-size: px_2_vw(22);
					font-weight: 600;
					position: relative;
				}
			}

			.columnar-item {
				margin-right: 20rpx;
				width: px_2_vw(436);
				height: px_2_vw(297);
				border-radius: 14rpx;
				background: #C0C3F5;

			}

			.speed-desc-num {
				font-size: px_2_vw(32);
				font-weight: 600;
			}

			.study-speed {
				width: px_2_vw(245);
				height: px_2_vw(245);
				// background: #000;
			}

			.speed-desc {
				position: absolute;
				bottom: 22rpx;
				font-weight: 400;
			}
		}

		::v-deep .uni-select {
			border: 1px solid #0600FF;
		}

		::v-deep .uni-select__input-placeholder {
			color: #0514FA;
			font-weight: 600;
		}

		::v-deep .uni-select__input-text {
			color: #0514FA;
			font-weight: 600;
		}



	}
</style>